<template>
	<view class="content">
		<view class="padding-about-24 padding-top-01">
			<view class="font-size-26 text-right display-flex align-items flex-end"
				style="color: #FE6740; padding: 24rpx  0 0 0;">
				<view @click="isflag = !isflag">
					{{!isflag?'管理':'完成'}}
				</view>
			</view>
			<view v-if="list.length == 0" class="display-flex flex-direction-column center align-items margin-top-120">
				<image :src="imgaeUrl('/static/home/kong.png')" style="width: 200rpx;height: 200rpx;" mode="widthFix">
				</image>
				<view class="font-size-24 margin-top-05 color-999">
					暂无收藏！
				</view>
			</view>
			<view v-for="item,index in list" :key="index"
				@click="navigateTo('/pages/Home/goodsDetails/goodsDetails?id=' + item.product_id)"
				class="view margin-top-30 position-relative" style="overflow: hidden;">
				<view v-if="item.subsidy_price>0 && item.stock > 0"
					class=" label3 position-absolute display-flex align-items" style="top: 0; left: 0;">
					<view class="button color-FFF font-size-22"
						style="padding: 8rpx 20rpx;border-radius: 16rpx 0rpx 16rpx 0rpx;">
						爆品补贴
					</view>
					<view class="font-size-22 margin-left-20" style="color: #FA3110;">
						距离结束剩余
					</view>
					<view class="margin-left-20">
						<uv-count-down :time="item.end_time" format="DD天HH:mm:ss"></uv-count-down>
					</view>
				</view>
				<view class="display-flex align-items">
					<view class="margin-left-20" v-if="isflag" @click.stop="itemCheck(index)">
						<uv-icon v-if="item.ischeck" name="checkmark-circle-fill" color="#FF8D1E" size="20"></uv-icon>

						<view v-else class="border-radius"
							style="border: 1rpx solid #333333; width: 18px;height: 18px;background: #FFFFFF;">

						</view>
					</view>
					<view class="" style="padding: 24rpx;">
						<view :class="item.subsidy_price>0 && item.stock > 0 ?'margin-top-40':''" class="display-flex ">
							<image :src="item.thumb_img" style="width: 220rpx;height: 220rpx; border-radius: 20rpx;"
								mode=""></image>
							<view class="file-1 display-flex flex-direction-column space-between margin-left-20">
								<view class="font-size-28 webkit-line-clamp" style="-webkit-line-clamp: 2;">
									{{item.title}}
								</view>
								<view class="">
									<view class="display-flex align-items">
										<view class="margin-top-10" style="color: #FF2E38;">
											<text class="font-size-24 font-weight-bold">￥</text>
											<text class=" font-size-36 font-weight-bold">{{item.sale_price}}</text>
										</view>
										<view v-if="item.subsidy_price>0 && item.stock > 0"
											class="font-size-22 margin-top-10 margin-left-20"
											style="background: #F6F6F6;padding: 3rpx 12rpx; color: #FD6C56;">
											剩余{{item.stock}}单补贴
										</view>
									</view>
									<!-- 	<view v-if="item.subsidy_price>0 && item.stock > 0" class="btn margin-top-15">
							
										</view> -->
									<view v-if="item.subsidy_price>0 && item.stock > 0"
										class="buttons position-relative display-flex space-between margin-top-20">
										<view class=""></view>
										<image :src="imgaeUrl('/static/home/btn.png')"
											style="width: 214rpx;height: 72rpx;" mode=""></image>
										<view class="position-absolute display-flex space-between align-items"
											style="width: 100%;height: 100%;top: 0;">
											<view style="width: 114rpx;height: 72rpx;"
												class="display-flex flex-direction-column  align-items">
												<view class="">
													<view style="color: #FF2E38;">
														<text class="font-size-20 font-weight-500">￥</text>
														<text
															class=" font-size-28 font-weight-bold">{{item.price}}</text>
													</view>
												</view>
												<view class="font-size-20 " style="color: #FF2E38;margin-top: -6rpx;">
													{{ item.plan_type == 1?'定向高佣':'预估佣金'}}
												</view>
											</view>
											<view class="font-size-36 font-weight-bold" style="color: #FF2E38;">
												+
											</view>
											<view style="width: 184rpx;height: 72rpx;"
												class="color-FFF display-flex flex-direction-column  align-items">
												<view class="">
													<view>
														<text class="font-size-20 font-weight-500">￥</text>
														<text
															class=" font-size-28 font-weight-bold">{{item.subsidy_price}}</text>
													</view>
												</view>
												<view class="font-size-20 " style="margin-top: -6rpx;">
													每单补贴
												</view>
											</view>
										</view>
									</view>
									<view v-else class="display-flex margin-top-15 align-items">
										<view style="width: 108rpx;font-size: 22rpx;height: 40rpx;"
											class="label center-size-20  color-FFF">
											{{ item.plan_type == 1?'定向高佣':'佣金'}}
										</view>
										<view
											style="color: #FF2E38;width: 100rpx;font-size: 22rpx; height: 40rpx;border: none;background: #FFEEEA;"
											class="label1 center-size-20">
											¥{{item.price}}
										</view>
									</view>
								</view>
							</view>
						</view>
						<view v-if="item.reason" class="display-flex align-items margin-top-20">
							<image :src="imgaeUrl('/static/home/dian.png')" style="width: 28rpx;height: 26.79rpx;"
								mode="">
							</image>
							<view class="font-size-22 file-1 margin-left-20" style="color: #B45F3E;">
								<text class="font-weight-500">推荐理由：</text>
								<text>{{item.reason}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<div class="kong"></div>
		<div v-if="isflag" class="kong"></div>

		<div v-if="isflag" class="kong safe-area-inset-bottom"></div>
		<view v-if="isflag" class="bottom " style="border-radius: 4rpx 4rpx 0 0;">
			<view class="padding-about-24 display-flex space-between align-items">
				<view class="margin-left-20 display-flex align-items" v-if="isflag" @click.stop="allcheck()">
					<uv-icon v-if="allischeck" name="checkmark-circle-fill" color="#FF8D1E" size="20"></uv-icon>
					<view v-else class="border-radius"
						style="border: 1rpx solid #333333; width: 18px;height: 18px;background: #FFFFFF;">
					</view>
					<view class="font-size-26 margin-left-20 ">
						全选
					</view>
					<!-- <view class="font-size-26 margin-left-20 ">
						选中{{}}个
					</view> -->
				</view>
				<view @click="clearCollect" style="width: 202rpx;height:70rpx;overflow: hidden;"
					class="button display-flex center align-items margin-left-20 color-FFF font-size-28 font-weight-500">
					删除
				</view>
			</view>
			<view class="safe-area-inset-bottom">

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		imgaeUrl,
		nativeUI,
		navigateTo,
		navigateBack
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const pagingState = ref(false)
	const page = ref(1)
	const list = ref([]) //热门视频
	const isflag = ref(false)
	const allischeck = ref(false)
	onLoad(function(option) {
		collect()
	});
	onShow(function() {});

	function itemCheck(index) {
		list.value[index].ischeck = !list.value[index].ischeck
		allischeck.value = list.value.every(item => item.ischeck)
	}

	function allcheck(index) {
		if (!allischeck.value) {
			allischeck.value = !allischeck.value
			list.value = list.value.map(item => {
				item.ischeck = true
				return item
			})
		} else {
			allischeck.value = !allischeck.value
			list.value = list.value.map(item => {
				item.ischeck = false
				return item
			})
		}
	}
	async function clearCollect() {
		let ids = []
		// .map(item=>{
		// 	let item.list.filter(goodItem=>goodItem.ischeck).map(goodItem=>goodItem.id)
		// })
		for (var i = 0; i < list.value.length; i++) {
			let item = list.value[i]
			if (item.ischeck) {
				ids.push(item.id)
			}
		}
		uni.showModal({
			title: '提示',
			content: '您确定要删除收藏吗？',
			success: async function(res) {
				console.log(ids);
				let object = {
					ids: ids.toString()
				}
				if (res.confirm) {
					const {
						code,
						data
					} = await api.clearCollect(object)
					if (code == 0) {
						pagingState.value = false
						page.value = 1
						list.value = []
						collect()
					}
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	/** 获取热门视频*/
	async function collect() {
		let object = {
			page: page.value
		}
		if (!pagingState.value) {
			const {
				code,
				data
			} = await api.collect(object)
			list.value = list.value.concat(data.data)
			if (!data.has_more) {
				pagingState.value = true
				return
			}
			page.value++
		}
	}
	onReady(function() {});
	onReachBottom(function() {
		collect()
	});
</script>

<style scoped lang="scss">
	.center-size-20 {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
	}
	
	.label {
		width: 80rpx;
		height: 32rpx;
		background: linear-gradient(270deg, #FE6740 0%, #FE8B1D 100%);
		border-radius: 6rpx 0 0 6rpx;
	}
	.view {
		background: #FFFFFF;
		border-radius: 24rpx;
	}
</style>